<template>
    <div class="page main">
        <el-container>
            <SideBar />
            <el-container direction="vertical">
                <Header :user="user" />
                <el-main>
                    <div class="layout">
                        <router-view />
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import SideBar from "./components/sidebar";
import Header from "./components/header";
import { UserInfo } from "@/api/users";
import { GetCookie, ClearCookie } from "@/utils/cookie";
const router = useRouter();
const user = ref({});

onMounted(async () => {
    const userid = GetCookie("userid");
    if (!userid) {
        return router.replace("/login");
    }
    const res = await UserInfo();
    if (res == "NotLogin") {
        ClearCookie("userid");
        return router.replace("/login");
    }
    user.value = res;
});
</script>

<style lang="scss" scoped>
.layout {
    height: 100%;
    background: #fff;
    box-sizing: border-box;
    padding: 20px;
}
</style>
